<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>升级服务商</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>

</head>
<body style="height:100%;background-color:#fff">
<div id="blank" class="header" v-cloak>
    <div v-back.tapmode class="back"></div>
    <span class="title">升级服务商</span>
</div>
<div id="app" class="top-container" v-cloak>
    <div class="addmember-level" style="margin-top:40px;width:90%;background-size: 100% 130px;background-repeat:no-repeat;text-align:center;margin:0 auto;">
    <img v-src="'../../image/usercard_add_id3.png'" style="width:100%;margin:0 auto;">
    </div>
    <div class="addmember-fee" style="margin-top:40px;">
        <div v-if="fee > 0">
            <span>还需补缴服务费</span><span>{{fee}}元</span>
        </div>
        <!--<div>-->
            <!--<span>还需补缴保证金</span><span>{{deposit}}元</span>-->
        <!--</div>-->
        <div>
            <span>总计</span><span>{{total}}元</span>
        </div>
    </div>
    <div class="btn-commit" style="margin-top:80px;" v-myclick="levelUp">确认升级</div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script>
    var lvTypes,
        vm;
    apiready = function () {
        showProgress();
        setBSImg();
        new Vue({
            el: '#blank'
        });

        var data = {
            member_id: getPrefs('member_id')
        };
        var callback = function (ret) {
            var backData = ret.content;
            lvTypes = backData.levels;
            fee = lvTypes.need_pay_fee;
            deposit = lvTypes.need_pay_deposit;
            total = lvTypes.need_pay_total;
            level_id = lvTypes.level_id;
            activity_id = lvTypes.activity_id;
            initApp();
            api.parseTapmode();
            if(backData.can_update == 0) {
                pinet.alert(backData.cant_update_reason,closeWin);
            }
        };
        pinet.post(URL.upMemberEdit, data, callback);

        addListeners();
    };

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                lvTypes: lvTypes,
                select: -1,
                fee: fee,
                deposit: deposit,
                total: total,
                level_id: level_id,
                imgPath:'../../image/',
            },
            methods: {
                levelUp: function () {
                  var params = {
                      order_type: 2,
                      foreign_infos: level_id,
                  };
                  openWin('payment', params);
                },
                getBg: function (lvType) {
                    var memberStyle = getMemberStyle(lvType.level_id);
                    return {
                        backgroundImage:'url(' + this.imgPath + Vue.BSImg + '/' + memberStyle.levelup_bg +')'
                    };
                }
            }
        });
    }

    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function () {
            onPageEnd();
            api.closeWin();
        });
    }

</script>
</html>
